// 调用函数 动态渲染生成页面内容
setPage();

// 通过事件委托语法形式 给标签添加点击事件效果
$('.container').click(function (e) {
    // 获取 localStorage 中 存储的数据
    const cartArr = JSON.parse(window.localStorage.cart);

    // 全选点击事件
    if (e.target.getAttribute('name') === 'all') {
        // 给 数组中所有对象 buy 属性 设定属性值 
        // 是 全选input标签 checked属性值
        cartArr.forEach(item => {
            item.buy = e.target.checked;
        })

        // 其他input点击事件
    } else if (e.target.getAttribute('name') === 'other') {
        // 给 索引下标 和 点击标签存储的index值 相同的数据 修改 购买状态
        // 索引下标相同的对象 其中 buy属性值 是 点击的标签 checked属性值
        cartArr[e.target.getAttribute('index') - 0].buy = e.target.checked;

        // 减按钮点击事件
    } else if (e.target.getAttribute('name') === '-') {
        // 给 索引下标 和 点击标签存储的index值 相同的数据 修改 num属性值
        // num属性值 累减 1 如果等于 1 禁用 当前标签
        cartArr[e.target.getAttribute('index') - 0].num--;

        // 加按钮点击事件
    } else if (e.target.getAttribute('name') === '+') {
        // 给 索引下标 和 点击标签存储的index值 相同的数据 修改 num属性值
        // num属性值 累加 1 如果等于 库存 禁用 当前标签
        cartArr[e.target.getAttribute('index') - 0].num++;

        // 我不要按钮点击事件
    } else if (e.target.getAttribute('name') === 'del') {
        if (window.confirm('您确定要删除吗?')) {
            // 给 索引下标 和 点击标签存储的index值 相同的数据 删除
            cartArr.splice(e.target.getAttribute('index') - 0, 1);
        }
    }


    // 将新的数组 存储到 localStorage 中 
    window.localStorage.cart = JSON.stringify(cartArr);
    // 调用函数 再次动态渲染生成页面
    setPage();

})



// 动态渲染生成页面内容
function setPage() {
    // 定义变量 存储 结果 设定 全选按钮的属性
    let all = true;
    // 定义变量 存储 商品种类 商品数量 商品总价格
    let type = 0;
    let number = 0;
    let money = 0;



    // 实际项目中 应该是想数据库发送请求获取购物车商品信息
    // 当前是 获取 localStorage中存储的 购物车商品信息

    // localStorage中没有cart属性
    if (window.localStorage.cart === undefined) {
        // 调用结果是 undefined 证明 没有 cart属性 
        // 生成 对应的 页面内容
        $('.container').html('<h1>您还没有购买记录,请您先去选择要购买的商品</h1>');

    } else {
        // 调用结果是 undefined 证明 有 cart属性
        // 其中存储的是 json字符串 需要还原为对应的数据结构
        const cartArr = JSON.parse(window.localStorage.cart);

        if (cartArr.length === 0) {
            // 如果是 空数组 生成对应的页面内容
            $('.container').html('<h1>您的购物车已经被男朋友清空了,请您继续放心大胆的购物</h1>');

        } else {
            // 不是 空数组 根据 数组内容 动态渲染生成页面
            // li之前的固定内容 + 根据数组动态生成的li标签 + li之后的固定内容
            console.log(cartArr);

            // li之前的内容
            let str = `      
        <div class="panel panel-info ">
          <div class="panel-body bg-info">
            <div class="checkbox">
              <label>
                <input name="all" type="checkbox" value="">
                全选
              </label>
            </div>
          </div>
          <div class="panel-footer">
            <ul class="cart-list">
      ` ;


            // 根据数组 动态渲染生成的 li
            cartArr.forEach((item, key) => {
                if (item.buy) {
                    // 如果商品的购买状态是true
                    // 累加计算 购买商品的种类 数量 总价
                    type++;
                    number += item.num;
                    money += item.num * item.goods_price;

                } else {
                    // 如果商品的购买状态是false
                    // 给全选checked属性值赋值false
                    all = false;
                }

                // item 是 存储数据的 对象
                str += `
          <li class="cart-item">
            <div class="left">
              <input name="other"  index="${key}"  type="checkbox" ${item.buy ? 'checked' : ''}>
            </div>
            <div class="right">
              <div class="media">
                <div class="media-left">
                  <a href="#">
                    <img class="media-object" src="${item.goods_small_logo}" alt="...">
                  </a>
                </div>
                <div class="media-body">
                  <h4 class="media-heading">${item.goods_name}</h4>
                  <p>
                    <i class="glyphicon glyphicon-yen"></i>
                    <span>${item.goods_price}</span>
                  </p>
                  <div class="btn-group pull-right" role="group" aria-label="...">
                    <button name="-" index="${key}" ${item.num <= 1 ? 'disabled' : ''} type="button" class="btn btn-default">-</button>                             
                    <button type="button" class="btn btn-default" disabled>${item.num}</button>
                    <button name="+" index="${key}" ${item.num >= item.goods_number ? 'disabled' : ''} type="button" class="btn btn-default">+</button>
                  </div>
                  <button name="del" index="${key}" class="del btn btn-danger">我不要了</button>

                </div>
              </div>
            </div>
          </li>
        
        
        `;
            })


            // li之后的内容
            str += `
            </ul>

            <div>
              <h1>您一共购买${type}种商品</h1>
              <h1>您一共购买${number}件商品</h1>
              <h1>您一共需要支付${money.toFixed(2)}元</h1>
            </div>
          </div>
        </div>
      `;

            // 内容写入 标签中
            $('.container').html(str);

            // 设定全选标签的checked属性值
            $('[name="all"]').prop('checked', all);

        }
    }

}



/*
  1,  动态渲染生成页面
    购物车不存在 也就是 localStorage中没有cart属性
      生成对应的页面内容

    购物车存在 数组是一个空数组
      生成对应的页面内容

    购物车存在 数组中有数据
      生成对应的页面内容

    根据 对象.buy 购买状态 定义 每个商品前 input标签的checked属性值
    根据 对象.num 购买数量 定义 每个商品后 显示的商品购买数量
    根据 所有 对象.buy 定义 全选input标签checked属性值
    根据 每一个对象  对象.buy 对象.num 对象.goods_price 计算 购买商品的种类,数量,总价

    实际项目中 页面一定是根据数据库数据动态渲染生成 
    必须要修改数据库数据 根据新的数据 再次动态渲染生成页面内容

  2,  给标签添加点击事件
    通过事件委托语法形式 添加点击事件

    数组中的数据单元 和 生成的li标签对象 是 一一对应的关系
    实际项目中 是 根据 goods_id 在数据库中执行对应的操作

    点击 全选按钮
      给 数组中所有单元buy属性的属性值 设定为 全选input标签 checked属性值

    点击 其他input标签
      给 索引下标相同的数组中的对象 buy属性的属性值 设定为 点击的input标签 checked属性值

    点击 - 按钮
      给 索引下标相同的数组中的对象 num属性的属性值 累减 1 
      如果 num属性值 小于等于 1 禁用 减标签

    点击 + 按钮
      给 索引下标相同的数组中的对象 num属性的属性值 累加 1 
      如果 num属性值 大于等于 库存数值 禁用 减标签

    点击 删除 按钮
      给 索引下标相同的数组中的对象 从 数组中删除
      数组从 点击标签的索引下标开始 删除 1个 单元

    将 新数组的数据 转化为json字符串 存储到 localStorage 的 cart 属性中
    调用函数 根据 localStorage中cart存储的新数据 动态渲染生成页面
 
*/